<template>
  <Card>
    <span slot="title">申报公告</span>
    <div slot="content">
      <div class="declaration_notice">
        <!-- 顶部工具 -->
        <div class="top_tools">
          <el-form size="small" inline ref="searchForm" :model="searchForm">
            <el-form-item prop="title">
              <el-input
                v-model="searchForm.title"
                placeholder="请输入公告标题"
              ></el-input>
            </el-form-item>
            <el-form-item prop="from">
              <el-input
                v-model="searchForm.summary"
                placeholder="请输入来源"
              ></el-input>
            </el-form-item>
            <el-form-item prop="date" label="发布时间:">
              <el-date-picker
                v-model="searchForm.createTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <we-button size="small" type="primary" @click="handleSearch"
                ><i class="el-icon-search"></i>查询</we-button
              >
              <we-button size="small" @click="handleReset"
                ><i class="el-icon-refresh"></i>重置</we-button
              >
            </el-form-item>
          </el-form>
          <we-button size="small" type="primary" @click="handleAdd"
            ><i style="font-weight: 700" class="el-icon-plus"></i
            >新增公告</we-button
          >
        </div>
        <!-- 表格 -->
        <div class="table">
          <el-table
            size="mini"
            :header-cell-style="headerStyle"
            stripe
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column label="公告标题" prop="title"> </el-table-column>
            <el-table-column label="来源" prop="summary" width="200px">
            </el-table-column>
            <el-table-column
              label="有效时间"
              prop="limitTime"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="发布时间"
              prop="createTime"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <!-- <el-table-column label="操作" header-align="center" align="center">
              <template slot-scope="scope">
                <we-button
                  size="mini"
                  type="primary"
                  @click="handleDetails(scope.row)"
                  >详情</we-button
                >
                <we-button
                  size="mini"
                  type="danger"
                  @click="handleDel(scope.row.uuid)"
                  >删除</we-button
                >
              </template>
            </el-table-column> -->
          </el-table>
          <div class="pagination">
            <we-Pagination
              :page="pagination.pageNum"
              :pageSize="pagination.pageSize"
              :total="pagination.total"
              @currentChange="currentChange($event)"
            >
              ></we-Pagination
            >
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WeButton from "@/components/WeButton";
import WePagination from "@/components/WePagination";
import local from "@/utils/local";
import {
  getAnnouncementManagementList, //获取公告管理列表
  deleteAnnouncement, //删除公告
  viewDetails, //查看详情
} from "@/api/titleDeclaration";
import moment from "moment";

export default {
  components: {
    Card,
    WeButton,
    WePagination,
  },
  data() {
    return {
      // 搜索表单
      searchForm: {
        title: "",
        summary: "",
        createTime: "",
      },
      // 分页数据
      pagination: {
        total: 1, // 总数据条数
        pageSize: 8, // 每页条数
        pageNum: 1, // 当前页
      },
      // 表格数据
      tableData: [],
      uuid: "",
    };
  },
  methods: {
    // 查询触发
    handleSearch() {
      this.pagination.pageNum = 1;
      this.fetchData();
      console.log(this.searchForm.createTime);
    },
    // 重置触发
    handleReset() {
      this.searchForm = {
        title: "",
        summary: "",
        createTime: "",
      };
      this.handleSearch();
    },
    // 新增公告触发
    handleAdd() {
      this.$router.push("/title_declaration/announcement_management/add");
    },
    // 表头样式回调
    headerStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
    // 删除
    handleDel(data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { code, msg } = await deleteAnnouncement({ uuid: data });
          if (code === 200) {
            this.$message({
              type: "success",
              message: msg,
            });
            this.fetchData();
          } else {
            this.$message({
              type: "danger",
              message: msg,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看详情
    async handleDetails(data) {
      let res = await viewDetails({ uuid: data.uuid });
      console.log(res);
      local.set("ggdetails", res.data);
      this.$router.push("/title_declaration/announcement_management/details");
    },
    // 当前页改变
    currentChange(event) {
      this.pagination.pageNum = event;
      this.fetchData();
    },

    // 获取数据
    async fetchData() {
      // 发送请求 获取账号列表
      let res = await getAnnouncementManagementList({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        // 查询参数
        title: this.searchForm.title,
        summary: this.searchForm.summary,
        createTime: this.searchForm.createTime,
      });
      // 解构数据
      let { code, data } = res;
      // 处理时间格式
      data.resList.forEach((item) => {
        item.createTime = moment(item.createTime).format("YYYY-MM-DD");
      });

      // 边界判断
      if (!data.resList.length && this.pagination.pageNum !== 1) {
        this.pagination.pageNum -= 1;
        this.fetchData();
      }
      // 赋值渲染
      if (code === 200) {
        this.pagination.total = data.totals;
        this.tableData = data.resList;
      }
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style lang="less" scoped>
.declaration_notice {
  .top_tools {
    display: flex;
    justify-content: space-between;
  }
  .table {
    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
